<template>
  <div>
    <el-card>
      <!--卡片头部-->
      <div slot="header">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-input label="id" v-model="dataForm.key" placeholder="订单id或商品id" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input label="商品名称" v-model="dataForm.productName" placeholder="商品名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select style="width:160px" v-model="dataForm.status" placeholder="订单状态" clearable>
              <el-option label="待支付" :value="0"></el-option>
              <el-option label="已支付" :value="1"></el-option>
              <el-option label="支付失败" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50">
          </el-table-column>
          <el-table-column prop="id" header-align="center" align="center" label="订单id">
          </el-table-column>
          <el-table-column prop="productName" header-align="center" align="center" label="商品名称">
          </el-table-column>
          <el-table-column prop="payAmount" header-align="center" align="center" label="支付金额">
          </el-table-column>
          <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
          </el-table-column>
          <el-table-column prop="status" header-align="center" align="center" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">待支付</span>
              <span v-else-if="scope.row.status === 1">已支付</span>
              <span v-else>支付失败</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="DetailsHandle(scope.row.id)">详情</el-button>
              <el-button v-if="scope.row.status === 0" type="text" size="small" @click="PayHandle(scope.row.id)">
                支付
              </el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                       :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                       :total="totalPage"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <Details :get-data-list="getDataList" v-if="DetailsVisible" ref="Details" @refreshDataList="getDataList">
        </Details>
      </div>
    </el-card>
  </div>
</template>

<script>
import Details from './order-details'
import request from '@/utils/request'

export default {
  name: 'OrderView',
  data() {
    return {
      dataForm: {
        status: '',
        productName:'',
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      DetailsVisible: false,
    }
  },
  created() {
    this.getDataList()
  },
  components: {
    Details
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      request.get('/order/user/list', {
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          productName: this.dataForm.productName,
          status: this.dataForm.status
        }
      })
          .then(response => {
            if (response.data && response.data.code === 200) {
              this.dataForm.status = response.data.page.list.status
              this.dataList = response.data.page.list
              this.totalPage = response.data.page.totalCount
            } else {
              this.$message.error(response.data.msg)
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
          .catch(error => {
            console.error(error)
          })
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 详情
    DetailsHandle(id) {
      this.DetailsVisible = true
      this.$nextTick(() => {
        this.$refs.Details.init(id)
      })
    },
    //支付
    PayHandle(id) {
      this.$confirm(`确定对[订单${id}]进行支付`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post(`/order/user/pay/${id}`).then(response => {
          if (response.data && response.data.code === 200) {
            this.getDataList()
            this.$message({
              message: '支付成功',
              type: 'success',
              duration: 1500,
            })
          } else {
            this.$message.error(response.data.msg)
          }
        }).catch(error => {
          console.error(error)
        })
      }).catch(() => {
      })//用户点击取消
    },
    // 删除
    deleteHandle(id) {
      const ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      });
      this.$confirm(`确定对[订单${ids.join(',')}]进行${id ? '删除' : '批量删除'}操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/order/user/delete', ids)
            .then(response => {
              if (response.data && response.data.code === 200) {
                this.getDataList()
                this.$message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1500,
                })
              } else {
                this.$message.error(response.data.msg)
              }
            }).catch(error => {
          console.error(error)
        })
      }).catch(() => {
      })//用户点击取消
    },
  }
}
</script>
<style>
@import "@/css/global.css";
</style>
